<template>
  <div class="head">
      <div class="logo">
        <img style="width:46px;margin-right:10px" src="../../assets/ops1.png" alt="logo">
        空旷地小程序管理
      </div>
      <div class="status">
          <div>
            <a-avatar :size="32" icon="user" />
            <span style="margin:0 40px;">当前用户：{{username}}</span>
          </div>
          <!-- <span>退出</span> -->
          <router-link style="color:#fff" to="/login">退出</router-link>
      </div>
  </div>
</template>

<script>

export default {
    name:"header",
    created(){
        this.username = localStorage.getItem('username')
    },
    data(){
        return {
          username:""
        }
    },
    methods:{

    }
}
</script>

<style> 
.head{
    width: 100%;
    height: 85px;
    background-color: #4EA3FB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px ;
}
.logo{
  font-size: 19px;
  font-weight: bolder;
  color: #fff;
}
.status{
    /* width: 25%; */
    height: 85px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #fff;
    font-size: 19px;
    font-weight: bolder;
}

</style>